<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>小普马桶</title>
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" href="../css/my_address.css">
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/LArea.min.css" />
    <link rel="stylesheet" href="../css/add_region.css">
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-top">
    <div class="aui-pull-left aui-btn goBack">
        <span class="aui-iconfont aui-icon-left"></span>
    </div>
    <div class="aui-title">添加地址</div>
</header>
<section id="app">
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-border-b">
                    <div class="aui-list-item-label">
                        收货人：
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="姓名" id="realName">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-border-b">
                    <div class="aui-list-item-label">
                       手机号：
                    </div>
                    <div class="aui-list-item-input">
                        <input type="tel" placeholder="请输入手机号" id="phone">
                    </div>
                </div>
            </li>
            </ul>
        </div>
        <div class="aui-flex-col ">
            <div class="aui-flex-item-3 aui-margin-l-15" style="position: relative;">
                <div class="aui-font-size-16">收货地址:</div>
            </div>
            <div class="aui-flex-item-7  aui-border-b">
                <div class="content-block" style="margin-top:-0.6rem" >
                    <input id="demo1" type="text"  placeholder="请选择城市" id="city"/>
                    <input id="value1" type="hidden" value="20,234,504"/>
                </div>
            </div>
            <div class="aui-flex-item-1 aui-border-b">
                <div>
                    <span class="aui-iconfont aui-icon-right"></span>
                </div>

            </div>
        </div>
            <form class="form">
               <div class="aui-margin-l-15">地址详情:
                  <input type="text" placeholder="请输入街道、门牌号" id="houseNumber">
               </div>
                </form>

    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">设为默认地址</div>
                    <div class="aui-list-item-right" v-on:click="defaultBtn()">
                        <label class="check-radio"><input class="aui-radio" type="radio"  v-bind:checked="submitInfo"> </label>
                    </div>
                </div>
            </li>
            </ul>
        </div>
    <p><div class="aui-btn aui-btn-info addBtn" v-on:click=" succeedBtn()">确认添加</div></p>

</section>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/aui-tab.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/aui-sharebox.js" ></script>
<script type="text/javascript" src="../js/LArea.min.js" ></script>
<script type="text/javascript" src="../js/LAreaData1.js" ></script>
<script type="text/javascript" src="../js/aui-toast.js" ></script>
<script type="text/javascript" src="../js/add_region.js"></script>
<script type="text/javascript">
    var toast = new auiToast(); //初始化toast事件
    var vltHome = new Vue({
        el:'#app',
        data:{
            submitInfo:true
        },
        methods: {
//            succeedBtn: function () {//添加地址
//                window.location.href = "./address_list.html";
//            },
            //提交信息判断部分
            succeedBtn: function () {
                var Params = {};
                Params.realName = $("#realName").val(); //姓名
                Params.phone = $("#phone").val(); //手机号
                Params.city = $("#city").val(); //城市
                Params.houseNumber = $("#houseNumber").val(); //门牌号
                if (!Params.realName) {
                    toast.custom({
                        title: "请输入姓名",
                        html: '',
                        duration: 2000
                    });
                    return false;
                }
                if (!Params.phone) {
                    toast.custom({
                        title: "请输入手机号",
                        html: '',
                        duration: 2000
                    });
                    return false;
                }
                if (!Params.city) {
                    toast.custom({
                        title: "请输入城市",
                        html: '',
                        duration: 2000
                    });
                    return false;
                }
                if (!Params.houseNumber) {
                    toast.custom({
                        title: "请输入门牌号",
                        html: '',
                        duration: 2000
                    });
                    return false;
                }
            },
            defaultBtn:function(){
                vltHome .submitInfo=!vltHome .submitInfo
            }

        }
    });

    var area1 = new LArea();
    area1.init({
        'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
        'valueTo': '#value1', //选择完毕后id属性输出到该位置
        'keys': {
            id: 'id',
            name: 'name'
        }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
        'type': 1, //数据源类型
        'data': LAreaData //数据源
    });
    area1.value=[1,13,3];//控制初始位置，注意：该方法并不会影响到input的value
</script>
</body>
</html>